<template>
  <div>
    <h1>需求主页</h1>
    <div style="margin-top: 15px">
      <el-input placeholder="请输入内容" v-model="title">
        <template slot="append"
          ><el-button @click="sou">搜索</el-button></template
        >
      </el-input>
      <el-button type="danger" @click="issue">发布项目</el-button>
    </div>

    <div>
      <span
        ><button @click="paging(1)">全部</button
        ><button @click="paging1(1)">项目</button
        ><button @click="paging2(1)">按时</button></span
      >
    </div>
    <div class="container">
      <div class="row">
        <div class="elem" v-for="(i, x) in list" :key="x">
          <h3>
            <span>{{ i.type }} </span>
          </h3>
          <span class="pa">￥{{ i.money }}</span
          ><br />
          <span>{{ i.title }}</span
          ><br />
          <span>{{ i.descs }}</span
          ><br />
          <span><button>我要开店</button><button>购买类似服务</button></span>
        </div>
      </div>
    </div>

    <el-pagination
      background
      :page-size="page"
      :pager-count="10"
      layout="prev, pager, next"
      :total="tcount"
      @current-change="pages"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      page: 1,
      page_size: 3,
      tcount: 0,
      list: [],
      title: "",
    };
  },
  methods: {
    paging(page) {
      this.page = page;
      this.axios
        .get(
          "/getprojectall?page=" + this.page + "&page_size=" + this.page_size
        )
        .then((res) => {
          this.list = res.data.all;
          this.tcount = res.data.tcount;
        });
    },
    paging1(page) {
      this.page = page;
      this.axios
        .get(
          "/getprojectall?page=" + this.page + "&page_size=" + this.page_size
        )
        .then((res) => {
          this.list = res.data.prolist;
          this.tcount = res.data.tcount;
        });
    },
    paging2(page) {
      this.page = page;
      this.axios
        .get(
          "/getprojectall?page=" + this.page + "&page_size=" + this.page_size
        )
        .then((res) => {
          this.list = res.data.onlist;
          this.tcount = res.data.tcount;
        });
    },
    pages(p) {
      this.paging(p);
    },
    sou() {
      this.axios.get("label_index?title=" + this.title).then((res) => {
        this.list = res.data.data;
      });
    },
    issue() {
      this.$router.push("issue");
    },
  },
  mounted() {
    this.paging(1);
  },
};
</script>

<style>
.container {
  width: 900px;
  height: auto;
  margin: auto;
}
.row {
  width: 900px;
  height: auto;
  display: flex;
  background-color: #ffffff;
}
.elem {
  margin-top: 20px;
  margin-right: 20px;
  flex: 1;
  background-color: #eee;
  height: 200px;
}
.tall-elem {
  height: 500px;
}
.child {
  margin: 20px 20px 0px 20px;
  background-color: yellow;
  width: calc(100% - 40px);
  height: 100px;
}
.pa {
  color: red;
}
</style>
